import Vue from 'vue';
import ToastModule from './Toast.vue';

var ToastTemplate = Vue.extend({
  template: '<div><toast-module V-bind:show.sync="ModuleShow" V-bind:text="text" V-bind:type="type"></toast-module></div>',
  components: {
    ToastModule,
  },
})

var Toast = new ToastTemplate({
  data: function () {
        return {
          ModuleShow: false,
          text: '',
          type: '',
        }
    },
    methods: {
      show(text, type) {
        this.text = text;
        this.type = type;
        this.ModuleShow = true;
      },
      hidden() {
        this.ModuleShow = false;
      }
    }
})

Toast.$once('mount', function (target) {
    if (!document.getElementById('toast')){
        let div = document.createElement('div');
        div.setAttribute('id', 'toast');
        document.body.appendChild(div);
    }
    target.$mount('#toast');
})

export default module = function(){
    this.Toast = Toast;
}
module.show = function show(text, type = 'text') {
    Toast.$emit('mount', Toast);
    text !== '' && Toast.show(text, type);
}
module.hidden = function hidden() {
    Toast.hidden();
}